<template>
	<view class="my-recommend">
		<view class="m-r-card" >
			<view class="b-tag">
				<uni-data-checkbox :selected-textColor="'#ffffff'" mode="tag" v-model="radio" :localdata="sex" @change="onChange"></uni-data-checkbox>
			</view>
		</view>
		<template v-if="state">
			<view class="m-r-card1">
				<view class="r-c-th">
					<uni-row>
						<uni-col :span="6">来源</uni-col>
						<uni-col :span="6">时间</uni-col>
						<uni-col :span="6">金额</uni-col>
						<uni-col :span="6">状态</uni-col>
					</uni-row>
				</view>
				<view class="r-c-td" v-if="data.tableData.length">
					<uni-row v-for="item in data.tableData" :key="item.id">
						<uni-col :span="6">{{ item.content || '' }}</uni-col>
						<uni-col :span="6">{{ item.create_time || '' }}</uni-col>
						<uni-col :span="6">￥{{item.price || '0.00'}}</uni-col>
						<uni-col :span="6">{{['待审核','已同意','已到账','提现失败'][item.status]}}</uni-col>
					</uni-row>
					<uni-load-more :contentText="contentText" :status="data.status" @clickLoadMore="loadClick()"></uni-load-more>
				</view>
			</view> 
		</template>
		<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;" v-else>
			<image :src="zanwudingdan" mode="widthFix" style="width: 360rpx;"></image>
			<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin: 50rpx 0 150rpx;">暂无数据!</text>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zanwudingdan:`${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				state:true,
				radio:1, // 日期选择器的状态 1：每天 2：每周 3：每月
				sex: [{ // 日期选择器的数据
					text: '今日',
					value: 1
				}, {
					text: '本周',
					value: 2
				}, {
					text: '本月',
					value: 3
				}],
				data:{
					tableData:[],
					page:1, // 初始页码
					total:0, // 数据总条数
					status:'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
				},
				contentText:{contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}, // 加载更多组件的提示文本
			}
		},
		onLoad() {
			Object.assign(this.data, this.$options.data().data)
			this.getData()
		},
		onPullDownRefresh() {
			let _this = this
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 恢复初始状态
					Object.assign(_this.data, _this.$options.data().data)
					_this.getData()
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		methods: {
			/**
			 * 日期切换栏数据发生变化时触发
			 * @param {Object} e 当前选项的value值
			 */
			onChange(e) {
				Object.assign(this.data, this.$options.data().data)
				this.radio = e.detail.value
				this.getData(e.detail.value)
			},
			/**
			 * 点击加载更多组件时触发
			 * @param {Object} e 点击时的状态
			 */
			loadClick(e) {
				if(e.detail.status == 'no-more') return this.data.status = "no-more"
				this.data.status = "loading"
				this.data.page += 1
				this.getData(this.radio,this.data.page )
			},
			/**
			 * 获取数据
			 */
			async getData(type = 1,page = 1,limit = 10) {
				try{
					let res = await this.$http.post('/index/Cleanerindex/withdrawal_list',{
						type,
						page,
						limit
					})
					this.data.tableData = [...this.data.tableData,...res.data]
					this.data.total = res.total
					this.state = this.data.tableData.length
					if(this.data.page >= res.last_page) return this.data.status = 'no-more'
					this.data.status = 'more'
				}catch(e){
					this.state = false
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.my-recommend {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
		// 日期状态选择栏样式
	.m-r-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
		padding: 32rpx 0;
		margin-bottom: 22rpx;
		.b-tag {
			.uni-data-checklist {
				.checklist-group {
					border: 1px solid #53E48D;
					border-radius: 14rpx;
					background-color: #FFFFFF;
					overflow: hidden;
					.checklist-box {
						border: 0;
						margin: 0;
						padding: 20rpx 30rpx;
						background: linear-gradient(101deg, #ffffff, #ffffff);
						.checklist-text {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333!important;
						}
					}
					.is-checked  {
						background: linear-gradient(101deg, #53E48D 0%, #53E48D 100%);
						.checklist-text { 
							color: #ffffff!important;
						}
					}
				}
			}
		}
	}
		
	// 表格样式
	.m-r-card1 {
		display: flex;
		flex-direction: column;
		flex: 1;
		box-sizing: border-box;
		width: 100%;
		padding: 32rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		.r-c-th {
			height: 68rpx;
			border-radius: 8rpx;
			background-color: #F9F9F9;
			.uni-row {
				.uni-col {
					line-height: 68rpx;
					font-size: 24rpx;
					font-weight: 600;
					color: rgba($color: #000000, $alpha: 0.9);
					text-align: center;
				}
			}
		}
		.r-c-td {
			flex: 1;
			border-radius: 8rpx;
			overflow: auto;
			.uni-row {
				.uni-col {
					line-height: 80rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: rgba($color: #000000, $alpha: 0.7);
					text-align: center;
					border-bottom:1rpx solid #F6F6F6;
				}
			}
		}
	}
}
</style>
